<!-- 固定title的inputTable,一部分允许编辑 ,一部分不允许编辑 -->
<!--使用:报价评审明细table -->
<template>
	<div>
		<!-- {{ scope123.data.formData[scope123.data.item.key] }} -->
		<!-- {{ dataArray }} -->
	</div>

	<div class="test">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
			<div class="tint">
				<div style="background-color: #f5f7fa; flex: 3; text-align: center; line-height: 40px; font: 70px; font-weight: bold; color: #1a63db">甲方清单</div>
				<div style="background-color: #f5f7fa; flex: 2; text-align: center; line-height: 40px; font: 70px; font-weight: bold; color: #1a63db">核算清单</div>
			</div>
			<v-table :data-list="dataArray" v-bind="tableConfig" :showFooter="false">
				<!-- scope.row.index可以获取当前数组中每一个对象的index!,这也是dataArray遍历时,会自动添加index属性的原因!! -->
				<template #menu="scope">
					<div class="box" style="color: #333333">
						<el-input
							:class="{ disableBack: true }"
							v-model="scope.row[scope.prop.slotName]"
							:placeholder="disabledArray[scope.row.index][scope.prop.slotName] ? ' ' : `请输入${scope.prop.label}`"
							:disabled="disabledArray[scope.row.index][scope.prop.slotName]"
						/>
						<div :class="{ 'box-con': scope.row[scope.prop.slotName] != oldArray[scope.row.index][scope.prop.slotName] }"></div>
					</div>
				</template>
				<template #firstRate="scope">
					<div class="box">
						<el-input
							v-model="scope.row[scope.prop.slotName]"
							:placeholder="disabledArray[scope.row.index][scope.prop.slotName] ? ' ' : `请输入${scope.prop.label}`"
							:disabled="disabledArray[scope.row.index][scope.prop.slotName]"
							@change="($event:any) => changefirstContent($event, scope.row)"
						/>
						<div :class="{ 'box-con': scope.row[scope.prop.slotName] != oldArray[scope.row.index][scope.prop.slotName] }"></div>
						<div class="symbol">%</div>
					</div>
				</template>
				<template #firstAmount="scope">
					<div class="box">
						<el-input
							v-model="scope.row[scope.prop.slotName]"
							:placeholder="disabledArray[scope.row.index][scope.prop.slotName] ? ' ' : `请输入${scope.prop.label}`"
							:disabled="disabledArray[scope.row.index][scope.prop.slotName]"
							@change="($event:any) => changefirstContent($event, scope.row)"
						/>
						<div :class="{ 'box-con': scope.row[scope.prop.slotName] != oldArray[scope.row.index][scope.prop.slotName] }"></div>
					</div>
				</template>
				<template #secondRate="scope">
					<div class="box">
						<el-input
							v-model="scope.row[scope.prop.slotName]"
							:placeholder="disabledArray[scope.row.index][scope.prop.slotName] ? ' ' : `请输入${scope.prop.label}`"
							:disabled="disabledArray[scope.row.index][scope.prop.slotName]"
							@change="($event:any) => changeSecondContent($event, scope.row,scope.prop.slotName)"
						/>
						<div :class="{ 'box-con': scope.row[scope.prop.slotName] != oldArray[scope.row.index][scope.prop.slotName] }"></div>
						<div class="symbol">%</div>
					</div>
				</template>
				<template #secondAmount="scope">
					<div class="box">
						<el-input
							v-model="scope.row[scope.prop.slotName]"
							:placeholder="disabledArray[scope.row.index][scope.prop.slotName] ? ' ' : `请输入${scope.prop.label}`"
							:disabled="disabledArray[scope.row.index][scope.prop.slotName]"
							@change="($event:any) => changeSecondContent($event, scope.row,scope.prop.slotName)"
						/>
						<div :class="{ 'box-con': scope.row[scope.prop.slotName] != oldArray[scope.row.index][scope.prop.slotName] }"></div>
					</div>
				</template>
			</v-table>
		</el-card>
	</div>
</template>

<!-- 可以增减的input文本框列表 -->
<!-- 成本评审-修改中使用 -->
<script setup lang="ts">
import { defineProps, reactive } from 'vue';
import { ElMessage } from 'element-plus';

import vTable from '/@/components/table/v-table.vue';
const props = defineProps({
	defaultObj: {
		type: Object,
		default: () => ({}),
	},
	dataArray: {
		type: [Array] as any[],
		default: () => {
			[];
		},
	},
	disabledArray: {
		//是否禁用输入
		type: [Array] as any[],
		default: () => {
			/**
			 * 主要defaule:()=>[] 这样可以 或者defaule:()=>{
				[]
			}
			 * */

			return [
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},

				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
				{
					menu: true,
					firstRate: true,
					firstAmount: true,
					secondRate: true,
					secondAmount: true,
				},
			];
		},
	},
	scope: {
		type: Object,
		default: () => ({}),
	},
	tableConfig: {
		type: Object,
		default: () => ({}),
	},
	isDetailState: {
		//是否为查看状态
		type: Boolean,
		default: false,
	},
});

const scope123 = reactive(props.scope);
//深拷贝对象,防止resetAction 将原对象重置
const dataArray = reactive(JSON.parse(JSON.stringify(props.dataArray)));
if (props.isDetailState) {
	for (let i = 0; i < dataArray.length; i++) {
		const element = dataArray[i];
		dataArray[i] = resetAction(element);
	}
}

function resetAction(obj: any) {
	Object.keys(obj).forEach((key) => {
		if (obj[key] == '自动生成') {
			obj[key] = '';
		}
	});
	return obj;
}
console.log(props.disabledArray);
const disabledArray = reactive(props.disabledArray);
//深拷贝dataArray,oldArray作为原有对象
const oldArray = JSON.parse(JSON.stringify(dataArray));

//甲方清单
const changefirstContent = (value: any, data: any) => {
	if (dataArray[0].firstRate && dataArray[0].firstAmount) {
		//合同金额不含税(计算)
		dataArray[1].firstAmount = ((dataArray[0].firstRate / 100 + 1) * dataArray[0].firstAmount).toFixed(2);
		dataArray[1].firstRate = dataArray[0].firstRate;
	}
	if (dataArray[0].firstAmount && dataArray[2].firstAmount) {
		// 材料(不含税)计算
		dataArray[2].firstRate = ((dataArray[2].firstAmount / dataArray[0].firstAmount) * 100).toFixed(2);
	}
	if (dataArray[0].firstAmount && dataArray[3].firstAmount) {
		//人工 (不含税)计算
		dataArray[3].firstRate = ((dataArray[3].firstAmount / dataArray[0].firstAmount) * 100).toFixed(2);
	}
	if (dataArray[0].firstAmount && dataArray[5].firstRate) {
		//管理费用
		dataArray[5].firstAmount = ((dataArray[0].firstAmount * dataArray[5].firstRate) / 100).toFixed(2);
	}
	if (dataArray[0].firstAmount && dataArray[6].firstRate) {
		//销售费用
		dataArray[6].firstAmount = ((dataArray[0].firstAmount * dataArray[6].firstRate) / 100).toFixed(2);
	}
	if (dataArray[0].firstAmount && dataArray[7].firstRate) {
		//财务费用
		dataArray[7].firstAmount = ((dataArray[0].firstAmount * dataArray[7].firstRate) / 100).toFixed(2);
	}
	if (dataArray[0].firstAmount && dataArray[8].firstRate) {
		//整体税负
		dataArray[8].firstAmount = ((dataArray[0].firstAmount * dataArray[8].firstRate) / 100).toFixed(2);
	}

	if (dataArray[0].firstAmount && dataArray[2].firstAmount && dataArray[3].firstAmount) {
		dataArray[4].firstRate = (((dataArray[0].firstAmount - dataArray[2].firstAmount - dataArray[3].firstAmount) / dataArray[0].firstAmount) * 100).toFixed(2);
		dataArray[4].firstAmount = (dataArray[0].firstAmount - dataArray[2].firstAmount - dataArray[3].firstAmount).toFixed(2);
	}

	//遍历判断是否全部金额有值,有的话做 计算净利润
	let totalAmountSate = true;
	dataArray.forEach((element: any) => {
		if (element.menu != '净利润') {
			if (!element.firstAmount || element.firstAmount == '自动生成') {
				totalAmountSate = false;
			}
		}
	});

	if (totalAmountSate) {
		console.log('全部有填写');
		let netProfit = 0;
		for (let i = 0; i < dataArray.length; i++) {
			const element = dataArray[i];
			if (i == 0) {
				netProfit = element.firstAmount;
			} else if (i < dataArray.length - 1 && i != 1 && i != 4) {
				netProfit -= element.firstAmount;
			}
		}

		dataArray[9].firstAmount = netProfit.toFixed(2);
		dataArray[9].firstRate = ((dataArray[9].firstAmount / dataArray[0].firstAmount) * 100).toFixed(2);
	} else {
		console.log('没填写');
	}
};

//核算清单
const changeSecondContent = (value: any, data: any, propName: any) => {
	if (value) {
		let reg = /(\-)?\d+(\.\d)?$/;
		console.log(reg.test(value));
		if (!reg.test(value)) {
			data[propName] = '';
			ElMessage.warning('请输入数字');
			return;
		}
	}

	if (dataArray[0].secondRate && dataArray[0].secondAmount) {
		//合同金额不含税(计算)
		dataArray[1].secondAmount = ((dataArray[0].secondRate / 100 + 1) * dataArray[0].secondAmount).toFixed(2);
		dataArray[1].secondRate = dataArray[0].secondRate;
	}
	if (dataArray[0].secondAmount && dataArray[2].secondAmount) {
		// 材料(不含税)计算
		dataArray[2].secondRate = ((dataArray[2].secondAmount / dataArray[0].secondAmount) * 100).toFixed(2);
	}
	if (dataArray[0].secondAmount && dataArray[3].secondAmount) {
		//人工 (不含税)计算
		dataArray[3].secondRate = ((dataArray[3].secondAmount / dataArray[0].secondAmount) * 100).toFixed(2);
	}
	if (dataArray[0].secondAmount && dataArray[5].secondRate) {
		//管理费用
		dataArray[5].secondAmount = ((dataArray[0].secondAmount * dataArray[5].secondRate) / 100).toFixed(2);
	}
	if (dataArray[0].secondAmount && dataArray[6].secondRate) {
		//销售费用
		dataArray[6].secondAmount = ((dataArray[0].secondAmount * dataArray[6].secondRate) / 100).toFixed(2);
	}
	if (dataArray[0].secondAmount && dataArray[7].secondRate) {
		//财务费用
		dataArray[7].secondAmount = ((dataArray[0].secondAmount * dataArray[7].secondRate) / 100).toFixed(2);
	}
	if (dataArray[0].secondAmount && dataArray[8].secondRate) {
		//整体税负
		dataArray[8].secondAmount = ((dataArray[0].secondAmount * dataArray[8].secondRate) / 100).toFixed(2);
	}

	if (dataArray[0].secondAmount && dataArray[2].secondAmount && dataArray[3].secondAmount) {
		dataArray[4].secondRate = (((dataArray[0].secondAmount - dataArray[2].secondAmount - dataArray[3].secondAmount) / dataArray[0].secondAmount) * 100).toFixed(2);
		dataArray[4].secondAmount = (dataArray[0].secondAmount - dataArray[2].secondAmount - dataArray[3].secondAmount).toFixed(2);
	}
	//遍历判断是否全部金额有值,有的话做 计算净利润
	let totalAmountSate = true;
	dataArray.forEach((element: any) => {
		if (element.menu != '净利润') {
			if (!element.secondAmount || element.secondAmount == '自动生成') {
				totalAmountSate = false;
			}
		}
	});

	if (totalAmountSate) {
		console.log('全部有填写');
		let netProfit = 0;
		for (let i = 0; i < dataArray.length; i++) {
			const element = dataArray[i];
			if (i == 0) {
				netProfit = element.secondAmount;
			} else if (i < dataArray.length - 1 && i != 1 && i != 4) {
				netProfit -= element.secondAmount;
			}
		}

		dataArray[9].secondAmount = netProfit.toFixed(2);
		dataArray[9].secondRate = ((dataArray[9].secondAmount / dataArray[0].secondAmount) * 100).toFixed(2);
	} else {
		console.log('没填写');
	}
};

defineExpose({
	dataArray,
});
</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<scope lang="scss" scoped>
.tint {
	display: flex;
	flex-direction: row;
	height: 40px;
}
.symbol {
	width: 28px;
	height: 28px;
	right: 0px;
	top: 5px;
	color: #333333;
	font: 28px;
	position: absolute;
}
.box {
	position: relative;
	overflow: hidden;
}
.box-con {
	width: 10px;
	height: 10px;
	position: absolute;
	background: #ff5566;
	top: -5px;
	left: -5px;
	transform: rotate(45deg);
}

.el-input.is-disabled .el-input__wrapper {
	// :deep(.el-input.is-disabled .el-input__wrapper) {
	// 	background-color: white;
	// 	color: #030303;
	// }
	background-color: white;
	color: #030303;
}
.el-input.is-disabled .el-input__inner {
	-webkit-text-fill-color: #030303;
}
</scope>
